<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>JSP Page</title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引用Vue -->

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>

		<script type="text/javascript" src="js/axios.js"></script>
		<script type="text/javascript" src="js/qs.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			.app {
				width: 750px;
				height: auto;
				font-size: 12px;
			}
			
			.title {
				width: 96%;
				height: 50px;
				margin: 10px auto;
				border-bottom: 1px solid darkgray;
			}
			
			.title h4 {
				font-size: 18px;
				font-weight: 500;
				color: #000 !important;
				margin-top: 10px;
			}
		</style>
	</head>

	<body>
		<div id="app" class="app">
			<div class="title">
				<h4 style="float: left;">采购单</h4>
				<span style="float: right;"><el-button @click="onSubmit('form')"><i class="el-icon-check"></i>保存</el-button></span>
			</div>
			<el-form ref="form" :model="form" :rules="rules" label-width="110px">

				<el-form-item label="采购主题" prop="theme">
					<el-input v-model="form.theme"></el-input>
				</el-form-item>
				<el-form-item label="供应商" prop="supno">
					<el-input v-model="form.supname" disabled></el-input>
				</el-form-item>
				<el-form-item prop="supname">
					<el-autocomplete v-model="form.supname" class="inline-input" :fetch-suggestions="querySearch" placeholder="请输入内容" :trigger-on-focus="false" @select="handleSelect">
						<template slot-scope="{ item }">
							  <div class="name">{{ item.supname }}</div>
						</template>
					</el-autocomplete>
				</el-form-item>
				<el-form-item label="供应商联系人">
						<el-col :span="8">
						<el-form-item prop="linId">
							<el-select  @select="handleSelect1" v-model="form.linId">
			  					<el-option v-for="item in linkman":key="item.supid":label="item.smname":value="item.supid">
							</el-select> 
						</el-form-item>
						</el-col>
						<el-col :span="12" :offset="2">
					<el-form-item label="经手人" prop="userid">
						<el-input v-model="form.username" placeholder="${username}" disabled></el-input>
					</el-form-item>
						</el-col>
				</el-form-item>
				
				<el-form-item label="采购日期">
						<el-col :span="8">
						<el-form-item prop="date1">
							<el-date-picker type="date" v-model="form.date1"
							placeholder="选择日期" :picker-options="pickerOptions0"></el-date-picker>
						</el-form-item>
						</el-col>
						<el-col :span="12" :offset="2">
					<el-form-item label="仓库" prop="stock">
						<el-select placeholder="未选" v-model="form.stock">
							<template v-for="item in sto">
								<el-option :label="item.dgsname" :value="item.dgsnum"></el-option>
							</template>
						</el-select>
					</el-form-item>
						</el-col>
				</el-form-item>
				
				<el-form-item label="预计到货日期">
						<el-col :span="8">
						<el-form-item prop="date2">
							<el-date-picker type="date" v-model="form.date2"
							placeholder="选择日期"  :picker-options="pickerOptions0"></el-date-picker>
						</el-form-item>
						</el-col>
						<el-col :span="12" :offset="2">
					<el-form-item label="分类" prop="type">
						<el-select placeholder="未选" v-model="form.type">
							<el-option label="零星采购" :value="3198"></el-option>
							<el-option label="大宗采购" :value="3199"></el-option>
						</el-select>
					</el-form-item>
						</el-col>
				</el-form-item>
				<el-form-item label="金额">
						<el-col :span="8">
						<el-form-item prop="money">
							<el-input v-model="form.money" disabled placeholder="￥0.00"></el-input>
						</el-form-item>
						</el-col>
						<el-col :span="12" :offset="2">
					<el-form-item label="状态" prop="state">
						<el-input v-model="form.state" disabled></el-input>
					</el-form-item>
						</el-col>
				</el-form-item>
				<!-- <el-form-item label="关联订单客户" prop="cusname">
					<el-input v-model="form.cusname" disabled></el-input>
				</el-form-item> -->
				<!-- <el-form-item prop="linkorder">
					<el-autocomplete v-model="form.linkorder" class="inline-input" :fetch-suggestions="querySearch2" placeholder="请输入内容" :trigger-on-focus="false" @select="handleSelect2">
						<template slot-scope="{ item }">
							<div class="name"></div>
						</template>
					</el-autocomplete>
				</el-form-item> -->
				
				<el-form-item label="关联订单">
						<el-col :span="8">
						<el-form-item prop="orderid">
							<el-select  @select="handleSelect2" v-model="form.orderid">
			  				<template v-for="item in order">
								<el-option :label="item.otitle" :value="item.o_id"></el-option>
							</template>
							</el-select> 
						</el-form-item>
						</el-col>
						<el-col :span="12" :offset="2">
					<el-form-item label="已付金额" prop="pay">
						<el-input v-model="form.pay" disabled placeholder="￥0.00"></el-input>
					</el-form-item>
						</el-col>
				</el-form-item>
				
				<el-form-item label="采购物品明细">
				<el-input disabled placeholder="保存后方可编辑明细"></el-input>
				</el-form-item>
				<el-form-item label="备注" prop="remark">
				<el-input type="textarea" :rows="2" v-model="form.remark"></el-input>
					</el-form-item>
			</el-form>
			<div class="title">
				<span style="float: right;"><el-button @click="onSubmit('form')"><i class="el-icon-check"></i>保存</el-button></span>
			</div>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data() {
					
					return{
						pickerOptions0: {
					          disabledDate(time) {
					              return time.getTime() < Date.now() - 8.64e7;
					            }
					          }, 
						sto:${sto},
						order:${order},
						linkman:[],/* 存放供应商联系人 */
						form:{
							theme: '',
							supno: '',
							supname:'',
							linId: '',
							userid: ${useid},
							username:'',
							date1: '',
							stock: '',
							date2: '',
							type: '',
							money: '',
							state: '',
							cusname: '',
							orderid: '',
							pay: '',
							remark: '',
							restaurants:[]
							
						},
						
						rules:{
							theme: [{
									required: true,
									message: '主题不能为空',
									trigger: 'blur'
							}],
							supno: [{
									required: true,
									message: '供应商不能为空',
									trigger: 'blur'
							}],
							date1: [{
									required: true,
									message: '采购日期不能为空',
									trigger: 'blur'
							}],
							stock: [{
									required: true,
									message: '仓库不能为空',
									trigger: 'blur'
							}]
						}
					};
				},
				methods: {
					onSubmit(formName) {
				    	//验证方法
				        this.$refs[formName].validate((valid) => {
				          if (valid) {
				        	  //post提交数据
				           	axios.post("/addpurchase",
				           			//参数转换
				           			Qs.stringify(this.form,{arrayFormat: 'brackets'})
				           			//ajax请求成功的回调函数
				           			).then(function(v){
				           			window.parent.location.replace("/purchaseList");
				           			console.log("回调成功，获取了服务器端返回的值v");
				           	}).catch(function(e){
				           		alert("出错了"+e);
				           	});
				        	  
				        	  
				          } else {
				            console.log('error submit!!');
				          }
				        });
				      },
					querySearch: function(queryString, cb) {
						 var allarr = this.form.restaurants;
				    	var newsarr = [];
							allarr.forEach(v => {
								 var strs =v.supname+"";
								 
								 if (strs.indexOf(queryString) >= 0) {
										newsarr.push(v);
										console.info(strs);
										console.info(v);
									} 
							})
							// 调用 callback 返回建议列表的数据
							cb(newsarr);
					},
					handleSelect: function(it) {
						console.log(it.supname);
						this.form.supname=it.supname;
						this.form.supno=it.supno;
						 var $this=this;
							//post提交数据
							axios.post("/querySupman?id="+this.form.supno
							).then(function(v) {
								this.linkman=v.data.supman;
								console.log(this.linkman);
								$this.linkman=v.data.supman;
								
								
							}).catch(function(e) {
								alert("出错了"+e);
							});
							
					},
					handleSelect1: function(it) {
						this.form.linId=it.supid;
					},
					querySearch2: function(queryString, cb) {
						
					},
					handleSelect2: function(it) {
						
								
					}
				},
				mounted() {
					//利用生命周期函数将所有供应商信息放入数组
					this.form.restaurants=${sps};
					this.form.username = ${username};
					this.form.userid = ${useid};
					
				}
			})
		</script>
	</body>

</html>